<template>
    <div class="photoinfo-box">
        <h3>{{photoinfolist.title}}</h3>
        <p class="subtitle">
            <span>发表时间:{{photoinfolist.add_time|dataFomart}}</span>
            <span>点击:{{photoinfolist.click}}次</span>
        </p>
        <hr>
        <!-- 缩略图插件 -->
         <vue-preview :slides="list" @close="handleClose"></vue-preview>

        <!-- 图片内容 -->
        <div class="content" v-html="photoinfolist.content"></div>

        <!-- 评论子组件 -->
        <cmt-box :id="this.id"></cmt-box> 
    </div>
    
</template>

<script>
//导入写好的子组件
import comment from "../subcomponents/comment.vue";

export default {
  data() {
    return {
      id: this.$route.params.id,
      photoinfolist: [],
      // slide1: [ //缩略图插件
      //   {
      //     src:
      //       "https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg",
      //     msrc:
      //       "https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg",
      //     w: 600,
      //     h: 400
      //   },
      // ],
      list:[]
    };
  },
  created() {
    this.getPhotoinfo();
    this.getPhotoview();
  },
  methods: {
    getPhotoinfo() {
      this.$http.get("api/getimageInfo/" + this.id).then(result => {
        if (result.body.status === 0) {
          this.photoinfolist = result.body.message[0];
        } else {
          //先不写了
        }
      });
    },
    getPhotoview() {
      this.$http.get("api/getthumimages/" + this.id).then(result => {
        if (result.body.status === 0) {
           result.body.message.forEach(item => {
             item.src = 'https://unsplash.it/300/200/?random'  //图片不能获取 有点问题 随便写了一个
             item.msrc = item.src
             item.w = 600;
             item.h = 400;  
           });
           this.list = result.body.message;
        } else {
          //先不写了
        }
      });
    },
    handleClose() { //缩略图插件
      console.log("close event");
    }
  },
  components: {
    //注册评论子组件
    "cmt-box": comment
  }
};
</script>

<style lang="sass" scoped>
.photoinfo-box{
    padding:3px;
    h3{
        color: #26A2FF;
        font-size:15px;
        text-align:center;
        margin:15px 0;
    }
    .subtitle{
        display:flex;
        justify-content:space-between;
        font-size:13px;
    }
    .content{
        font-size:13px;
        line-hgiht:25px;
    }
}
</style>
